<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>双人西瓜棋</title>
        <style type="text/css">
            * {margin:0px; padding:0px;}
            #qi_pan {width:400px; height:400px; background:url(../statics/images/qi.jpg); margin-left:200px; margin-top:100px;}
            .qi_zi {width:30px; height:30px; position:absolute; left:0px; top:0px; cursor:pointer;}
            #n0 {left:384px; top:93px;}
            #n1 {left:454px; top:108px;}
            #n2 {left:384px; top:165px;}
            #n3 {left:314px; top:108px;}
            #w0 {left:192px; top:285px;}
            #w1 {left:205px; top:217px;}
            #w2 {left:262px; top:285px;}
            #w3 {left:208px; top:355px;}
            #s0 {left:388px; top:475px;}
            #s1 {left:318px; top:460px;}
            #s2 {left:388px; top:405px;}
            #s3 {left:460px; top:457px;}
            #e0 {left:575px; top:280px;}
            #e1 {left:562px; top:344px;}
            #e2 {left:502px; top:280px;}
            #e3 {left:560px; top:208px;}
            #c0 {left:385px; top:282px;}
            #c1 {left:453px; top:281px;}
            #c2 {left:387px; top:354px;}
            #c3 {left:313px; top:284px;}
            #c4 {left:385px; top:214px;}
            #who {margin-left:350px; margin-top:20px;}
            .active {border:2px black solid;}
        </style>
        <script type="text/javascript" src="../statics/js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <div id="qi_pan"></div>
        <div class="qi_zi" id="n0"></div>
        <div class="qi_zi" id="n1"></div>
        <div class="qi_zi" id="n2"></div>
        <div class="qi_zi" id="n3"></div>
        <div class="qi_zi" id="w0"></div>
        <div class="qi_zi" id="w1"></div>
        <div class="qi_zi" id="w2"></div>
        <div class="qi_zi" id="w3"></div>
        <div class="qi_zi" id="s0"></div>
        <div class="qi_zi" id="s1"></div>
        <div class="qi_zi" id="s2"></div>
        <div class="qi_zi" id="s3"></div>
        <div class="qi_zi" id="e0"></div>
        <div class="qi_zi" id="e1"></div>
        <div class="qi_zi" id="e2"></div>
        <div class="qi_zi" id="e3"></div>
        <div class="qi_zi" id="c0"></div>
        <div class="qi_zi" id="c1"></div>
        <div class="qi_zi" id="c2"></div>
        <div class="qi_zi" id="c3"></div>
        <div class="qi_zi" id="c4"></div>
        <input type="hidden" id="selected" value="" />
        <input type="hidden" id="target" value="" />
        <input type="hidden" id="data" value="" />
        <h1 id="who"></h1>
        <b>西瓜棋玩法:</b><br />
        1.两人游戏,红方先走;<br />
        2.每方每次只能走一步,请五分钟内走棋;<br />
        3.当一个或以上棋子被对方围住无出路,则被杀死;<br />
        4.当某方只剩两子或更少时则判定为输家.<br /><br />
        <script type="text/javascript">
            var bln_moving = false;
            
            function _reset() {
                $('.qi_zi').css('background', 'none').removeClass('sitted').removeClass('active');
                $('#selected').val('');
                $('#target').val('');
                $('#who').html('');
            }
            
            function restart() {
                $.post('qi.php', {'do':'init'}, function(re) {
                    _reset();
                    setpos(re);
                }, 'json');
            }
            
            function setpos(re) {
                for (r in re) {
                    if ('result' == r) {
                        alert(re['result'] + ',请重新开始!');
                        restart();
                    } else if ('error' == r) {
                        alert('数据出错,请重新开始!');
                        restart();
                    } else if ('data' == r) {
                        $('#data').val(re['data']);
                    } else if ('who' == r) {
                        $('#who').html(re['who']);
                    } else {
                        var obj = $('#' + r);
                        obj.css('background-color', re[r].color);
                        obj.addClass('sitted');
                    }
                }
            }
            
            $(document).ready(function() {
                restart();
                $('.qi_zi').each(function() {
                    $(this).click(function() {
                        if (!bln_moving && '' == $('#target').val()) {
                            var _this = $(this);
                            if (_this.hasClass('sitted')) {
                                $('.qi_zi').removeClass('active');
                                _this.addClass('active');
                                $('#selected').val(_this.attr('id'));
                            } else {
                                if ('' != $('#selected').val()) {
                                    $('#target').val(_this.attr('id'));
                                    bln_moving = true;
                                    $.post('qi.php', {'do':'move', 'data':$('#data').val(), 'from':$('#selected').val(), 'to':$('#target').val()}, function(re) {
                                        _reset();
                                        setpos(re);
                                        bln_moving = false;
                                    }, 'json');
                                }
                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>